<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS 过渡</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #F7F7F7;
		}

		.items {
			width: 1250px;
			height: 320px;
			padding-left: 20px;
			margin: 80px auto;
		}

		.item {
			width: 230px;
			height: 300px;
			text-align: center;
			margin-right: 20px;
			background-color: #FFF;
			float: left;
			position: relative;
			top: 0;
			overflow: hidden;
			transition: all .5s;
		}

		.pic {
			margin-top: 30px;
		}

		.desc {
			position: absolute;
			bottom: -100px;
			width: 100%;
			height: 100px;
			background-color: #ff6700;
			transition: all .5s;
		}

		.item:hover {
			top: -5px;
			box-shadow: 0 0 15px #AAA;
		}

		.item:hover .desc {
			bottom: 0;
		}
	</style>
</head>
<body>
	<div class="items">
			<div class="item">
					<div class="pic">
						<img src="./images/1111.jpg" alt="">
					</div>
					<div class="desc"></div>
				</div>
		<div class="item">
			<div class="pic">
				<img src="./images/1111.jpg" alt="">
			</div>
			<div class="desc"></div>
		</div>
		<div class="item">
			<div class="pic">
				<img src="./images/1111.jpg" alt="">
			</div>
			<div class="desc"></div>
		</div>
		<div class="item">
			<div class="pic">
				<img src="./images/1111.jpg" alt="">
			</div>
			<div class="desc"></div>
		</div>
		<div class="item">
			<div class="pic">
				<img src="./images/1111.jpg" alt="">
			</div>
			<div class="desc"></div>
		</div>
	</div>
</body>
</html>